import { memo, useEffect } from 'react';
import type { ReactNode, FC } from 'react';
import { CustomCarousel, RadioContentWrapper, RadioRankWrapper, RedioWrapper } from './style';
import { RadioIDMap, RadioIDToNameMap, RadioRecommended, redioIcon } from '@/assets/data/loacl_data';
import { formatArrByNum } from '@/utils/format';
import BannerContainer from './c-cpns/bannerContainer';
import CommonHeader from '@/components/common-header';
import { useAppDispatch, useAppSelector } from '@/store/hooks';
import { getProgramRankStrore, getRecommendProgramStrore } from './store/redio';
import ProgramItem from '@/components/program-item';
import ProgramRankItem from '@/components/program-rank-item';
import RadioItem from './c-cpns/radio-item';
import { useSearchParams } from 'react-router-dom';
interface IProps {
  children?: ReactNode;
}

const Redio: FC<IProps> = (props) => {
  const newArr = formatArrByNum(redioIcon, 18);
  const [searchParams, setSearchParams] = useSearchParams();
  let search = '';
  if (searchParams.has('id')) {
    search = searchParams.get('id')!;
  }
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(getProgramRankStrore());
    dispatch(getRecommendProgramStrore());
  }, []);
  const { programRank, recommendProgram } = useAppSelector((state) => ({
    programRank: state.redio.ProgramRank,
    recommendProgram: state.redio.recommendedProgram,
  }));
  return (
    <RedioWrapper className="w980">
      <CustomCarousel arrows infinite={false} dotPosition="bottom">
        {newArr.map((item) => (
          <BannerContainer arr={item} search={+search}></BannerContainer>
        ))}
      </CustomCarousel>
      {search === '' ? (
        <>
          <RadioRankWrapper>
            <div className="rankCt">
              <CommonHeader
                icon={''}
                iconShow={false}
                name={'推荐节目'}
                moreLink={''}
                keywords={[]}
                moreIcon={false}
                nameSize="large"
              ></CommonHeader>
              <div className="list_border">
                {recommendProgram.slice(0, 10).map((item) => {
                  return <ProgramItem key={item.name} program={item} />;
                })}
              </div>
            </div>
            <div className="rankCt">
              <CommonHeader
                icon={''}
                iconShow={false}
                name={'节目排行榜'}
                moreLink={''}
                keywords={[]}
                moreIcon={false}
                nameSize="large"
              ></CommonHeader>
              <div className="list_border">
                {programRank.map((item, index) => {
                  return <ProgramRankItem key={item.program.name} index={index + 1} programRankItem={item} />;
                })}
              </div>
            </div>
          </RadioRankWrapper>
          <RadioContentWrapper>
            {RadioRecommended.map((item) => {
              return <RadioItem name={item}></RadioItem>;
            })}
          </RadioContentWrapper>
        </>
      ) : (
        <RadioItem key={search} name={RadioIDToNameMap[+search]} detail={true}></RadioItem>
      )}
    </RedioWrapper>
  );
};

export default memo(Redio);
